<style type="text/css">
.expGrid .icon { float: left; margin-top: 2px; }
</style>
<script type="text/javascript">
$(function(){
	var pg = $('body');
	var vw = pg.find('.view');
	vw.mac('grid', {
		cols : [{
			name: 'no', title : '&nbsp;', width: 18,
			render: function(r, tr){
				var a = $('<span class="icon icon-plus"></span>');
				a.click(function(){
					var yy = vw.find('.ybar>div');
					var pl = tr.exPanel;
					if(a.hasClass('icon-plus')){
						if(pl){
							pl.show();
						}else{
							pl = $('<ul style="background-color: #FFF; margin: 0px;"></div>');
							//you can load remote content here
							pl.append('<li>' + r.subject + '</li><li>'
								+ r.summary + '</li><li>Debit = '
								+ r.debit + '</li><li>Credit = ' + r.credit + '</li>'
							);
							tr.exPanel = pl.insertAfter(tr);
							$('<div class="clear"></div>').insertBefore(pl);
						}
						yy.height(yy.height() + pl.height());
						a.removeClass('icon-plus').addClass('icon-minus');
					}else{
						pl.hide();
						yy.height(yy.height() - pl.height());
						a.removeClass('icon-minus').addClass('icon-plus');
					}
				});
				return a;
			}
		},{
			field: 'summary', title : 'Summary', width: 140
		},{
			field: 'subject', title : 'Subject', width: 140
		},{
			field: 'debit', title : 'Debit', width: 76
		},{
			field: 'credit', title : 'Credit', width: 76
		}],
		loader: {
			url: '/mac/js/grid/data.php',
			params: { pageNo: 1, pageSize: 50 },
			autoLoad: true
		},
		pagerLength: 10
	});
});
</script>
<div class="viewPort demoPanel">
<div class="view grid expGrid"></div>
</div>
